<template>
  <div class="box setUserMsg">
    <header>
      <van-nav-bar
      title="账户设置"
      left-arrow
      @click-left="$router.back()"
      @click-right.stop="onClickRight"
      >
        <template #right>
          <van-icon name="weapp-nav" size="24" />
          <ul class="rightNavList" v-show="show">
            <li @click="$router.push('/home')">首页</li>
            <li @click="$router.push('/kind')">分类</li>
            <li @click="$router.push('/cart')">购物车</li>
            <li @click="$router.push('/my')">我的</li>
            <li @click="showShare = true">分享</li>
          </ul>
        </template>
      </van-nav-bar>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
    </header>
    <div class="cont">
      <van-cell title="管理我的账户">
        <template #label>
          <header class="headerBox">
            <van-uploader disabled>
              <van-image
                round
                width="0.5rem"
                height="0.5rem"
                :src="avatar"
              />
              <div class="userName">
                <h4>{{nickName}}</h4>
                <small>用户名：{{userName}}</small>
              </div>
            </van-uploader>
            <div class="active">当前登录</div>
          </header>
        </template>
      </van-cell>
      <van-cell title="收获地址管理" is-link to="/addressList" value="创建一个收获地址" />
      <van-cell title="账户与安全" is-link to="/personal" value="密码/实名认证等管理"/>
      <van-cell title="京雷支付密码" is-link to="index" value="去设置"/>
      <van-cell title="联系客服" is-link to="index" value="即时解答用户疑难"/>
      <van-cell title="切换站点" is-link to="index" />
      <div class="wrap">
        <van-cell title="意见反馈" icon="comment"/>
        <van-cell title="京雷客户端" icon="smile"/>
        <van-cell title="退出登录" icon="manager" @click="onSClick"/>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon, Cell, CellGroup, Uploader, Tag, Image as VanImage, ShareSheet } from 'vant'

import { getPresonal } from '../../api/index.js'

Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Uploader)
Vue.use(Tag)
Vue.use(VanImage)
Vue.use(ShareSheet)

export default {
  data () {
    return {
      show: false,
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' }
        ]
      ],
      nickName: '临时用户',
      userName: '',
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg'
    }
  },
  mounted () {
    getPresonal({
      userId: localStorage.getItem('userId')
    }).then(res => {
      console.log(res.data)
      this.userName = res.data.data.userName
      this.avatar = res.data.data.headPhoto
      this.nickName = res.data.data.nickName
    })
    document.addEventListener('click', () => {
      this.show = false
    })
  },
  methods: {
    onClickRight () {
      this.show = !this.show
    },
    onSClick () {
      localStorage.setItem('userId', '')
      localStorage.setItem('token', '')
      localStorage.setItem('isLogin', '')
      this.$router.replace('/home')
    },
    personal () {
      this.$router.push('/personal')
    }
  }
}
</script>

<style lang="scss">
  .setUserMsg{
    .rightNavList{
      position: absolute;
      width:0.8rem;
      top: 0.47rem;
      right: 0;
      background: #222;
      color: #fff;
      list-style: none;
      margin: 0;
      padding: 0 0.1rem;
      li{
        margin: 0.1rem 0;
        text-align: right;
        border-bottom: solid 1px #efefef;
      }
    }
    .headerBox{
      box-sizing: border-box;
      width: 100%;
      border: 1px solid #ff0000;
      border-radius: 5px;
      padding:0.2rem 0.1rem;
      display: flex;
      position: relative;
      .active{
        width: 0.6rem;
        border: 1px solid #ff0000;
        border-top: none;
        border-right: none;
        height: 0.2rem;
        border-radius:7px 5px;
        line-height: 0.2rem;
       position: absolute;
       right: 0;
       top: 0;
       text-align: center;
       background-color: #FF976A;
       color: #FF0000;
      }
      .van-uploader{
        width: 100%;
        .van-uploader__wrapper{
          width: 100%;
          .van-uploader__input-wrapper{
            width: 100%;
            display: flex;
            align-items: center;
            .userName{
              align-self: center;
              margin-left: 0.1rem;
              h4{
                margin: 0;
              }
            }
          }
        }
      }
    }
    .wrap{
      display: flex;
    }
  }
</style>
